import 'package:flutter/material.dart';

class TextFieldLogin extends StatefulWidget {
  const TextFieldLogin({super.key});

  @override
  State<TextFieldLogin> createState() => _TextFieldLoginState();
}

class _TextFieldLoginState extends State<TextFieldLogin> {
  late TextEditingController _usernameController, _passwordControllder;
  String username = "itjavawfc@163.com";
  String password = "";
  @override
  void initState() {
    super.initState();
    _usernameController = TextEditingController.fromValue(TextEditingValue(
        text: username,
        selection: TextSelection.fromPosition(TextPosition(
            affinity: TextAffinity.downstream, offset: username.length))));
    _passwordControllder = TextEditingController.fromValue(TextEditingValue(
        text: password,
        selection: TextSelection.fromPosition(TextPosition(
            affinity: TextAffinity.downstream, offset: password.length))));
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _usernameController.dispose();
    _passwordControllder.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录案例一'),
      ),
      body: Center(
        child: Padding(
          //外围填充
          //padding: const EdgeInsets.fromLTRB(200, 0, 200, 0), //前后填充，缩短框的长度
          padding: EdgeInsets.all(10),
          child: Column(//垂直布局
              children: <Widget>[
            Padding(
              padding: const EdgeInsets.fromLTRB(0, 20, 0, 0), //上边部分填充
              child: TextField(
                controller: _usernameController,
                style: const TextStyle(
                    fontSize: 12, color: Colors.black87), //文字大小、颜色
                //输入组件
                decoration: InputDecoration(
                  fillColor: Colors.grey[80], //背景颜色，
                  filled: true, //必须设置为true，fillColor才有效
                  isCollapsed: true, //相当于高度包裹的意思，必须设置为true
                  contentPadding: const EdgeInsets.symmetric(
                      horizontal: 15, vertical: 15), //内容内边距
                  hintText: "Email",
                  enabledBorder: OutlineInputBorder(
                      //设置输入框可编辑时的边框样式
                      borderRadius: BorderRadius.circular(20.0), //输入框圆角
                      borderSide: const BorderSide(
                          color: Colors.white, width: 0) //输入框白色隐藏
                      ),
                  focusedBorder: OutlineInputBorder(
                    //得到焦点颜色
                    borderRadius: BorderRadius.circular(20.0), //输入框圆角
                    borderSide: BorderSide(color: Colors.transparent),
                  ),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20.0), //输入框圆角
                  ),
                ),
                onChanged: (value) => setState(() {
                  username = value;
                  print('userName:$username');
                }),
              ),
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(0, 20, 0, 0), //上边部分填充
              child: TextField(
                controller: _passwordControllder,
                obscureText: true, //密码隐藏
                style: const TextStyle(
                    fontSize: 12, color: Colors.black87), //文字大小、颜色
                //输入组件
                decoration: InputDecoration(
                  fillColor: Colors.grey[80], //背景颜色，必须结合filled: true,才有效
                  filled: true, //必须设置为true，fillColor才有效
                  isCollapsed: true, //相当于高度包裹的意思，必须设置为true
                  contentPadding: const EdgeInsets.symmetric(
                      horizontal: 15, vertical: 15), //内容内边距，影响高度
                  hintText: "Password",
                  enabledBorder: OutlineInputBorder(
                      //设置输入框可编辑时的边框样式
                      borderRadius: BorderRadius.circular(20.0), //输入框圆角
                      borderSide: const BorderSide(
                          color: Colors.white, width: 0) //输入框白色隐藏

                      ),
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(20.0), //输入框圆角
                      borderSide:
                          const BorderSide(color: Colors.white, width: 0)),
                  focusedBorder: OutlineInputBorder(
                    //得到焦点颜色
                    borderRadius: BorderRadius.circular(20.0), //输入框圆角
                    borderSide: BorderSide(color: Colors.transparent),
                  ),
                ),
                onChanged: (value) => setState(() {
                  password = value;
                  print('password:$password');
                }),
              ),
            ),
            SizedBox(
              height: 20,
            ),
            Loginbutton(),
            ClipOvalimage()
          ]),
        ),
      ),
    );
  }
}

class Loginbutton extends StatelessWidget {
  const Loginbutton({super.key});
  @override
  Widget build(BuildContext context) {
    return Padding(
        //外围填充
        padding: const EdgeInsets.fromLTRB(0, 20, 0, 0), //四周填充10
        child: SelectionContainer.disabled(
          //文字不可选定，会影响按钮点击
          child: MaterialButton(
            color: const Color.fromARGB(255, 35, 102, 37), //按钮颜色
            textColor: Colors.white, //文本的颜色
            minWidth: 268, //最小的宽度 默认是 88
            height: 40, // 高度， 默认是 36
            onPressed: () {},
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20.0)),
            child: const Text("Let’s start"), //显示的文字
          ),
        ));
  }
}

class ClipOvalimage extends StatelessWidget {
  const ClipOvalimage({super.key});
  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.only(left: 80, right: 80, top: 20),
        child: Row(
          //横向布局
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: const [
            Padding(
              padding: EdgeInsets.all(10), //填充
              child: CircleAvatar(
                //图片圆形剪裁
                radius: 30, //圆形直径，（半径）？
                backgroundColor: Colors.white, //背景颜色设置为白色
                backgroundImage: NetworkImage(
                    "https://img1.baidu.com/it/u=29005527,4051115893&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"),
              ),
            ),
            Padding(
              padding: EdgeInsets.all(10),
              child: CircleAvatar(
                radius: 30,
                backgroundColor: Colors.white, //背景颜色设置为白色
                backgroundImage: NetworkImage(
                    "https://n.sinaimg.cn/sina_vr/transform/12/w476h336/20211008/9a91-269b8d094129e3e4def138d9ba2b280d.png"),
              ),
            ),
          ],
        ));
  }
}
